import React, {Component} from "react";
import {Form, message, Modal, Spin,} from "antd";
import FilterForm from "@/components/BaseForm/FilterForm";
import witty from "@/utils/wittyUtils";
import {connect} from "dva";

@connect(({accountModel}) => ({
    accountModel,
}))
class EditAccount extends Component {

    state = {
        //-- 编辑的数据源
        editData: {},
        //-- [true]:显示编辑窗口, [false]:关闭编辑窗口
        isShowEditModal: false,
        loading: false,
        modalTitle: '',
        editType: ''
    }

    /**
     * 显示/隐藏 销售公司编辑窗口
     */
    handlerEditModal = (type) => {
        const thisCtx = this;
        const {selectedRowKeys} = thisCtx.parent.state;
        if (type == 'create') {
            this.setState({
                modalTitle: '新增',
                isShowEditModal: true,
                editType: type
            })
        } else if (type == "edit" || type == 'detail') {
            if (!witty.isValidObj(selectedRowKeys) || selectedRowKeys.length != 1) {
                message.error('请选中一行数据');
                return;
            }
            const thisCtx = this;
            const {dispatch} = this.props;
            dispatch({
                type: 'accountModel/userInfo',
                payload: {id: selectedRowKeys[0]},
                callback: function (data) {
                    if (data && data.success) {
                        console.log(data);
                        thisCtx.setState({
                            modalTitle: type == 'edit' ? '编辑' : '查看详情',
                            editData: data.datas,
                            isShowEditModal: true,
                            editType: type
                        });
                    } else {
                        message.info('用户数据查询失败');
                    }
                }
            });
        }
    };

    componentDidMount() {
        const {onRef, parent} = this.props;
        this.parent = parent;
        if (onRef) {
            onRef(this);
        }
    }

    handleFilter = (params) => {
        this.params = params;
        if (witty.isValidObj(params)) {
            if (this.state.editType != 'edit') {
                witty.validNilParams(params);
            }
            const thisCtx = this;
            const {dispatch} = this.props;
            console.log(params);
            this.setState({loading: true});
            dispatch({
                type: 'accountModel/editUser',
                payload: params,
                callback: function (data) {
                    thisCtx.setState({loading: false});
                    if (data && data.success) {
                        message.success('操作成功');
                        thisCtx.setState({
                            isShowEditModal: false,
                            editData: {}
                        });
                        thisCtx.parent.findPageData();

                    } else {
                        message.info('操作失败:' + data.msg);
                    }
                }
            });
        }
    }

    render() {
        const thisCtx = this;

        const {isShowEditModal, loading, modalTitle, editType} = thisCtx.state;

        const colLayout = {
            xs: 24,
            sm: 24,
            md: 24,
            lg: 24
        }
        const formLayout = {
            layout: 'horizontal',
            labelCol: {
                xs: 24,
                sm: 5
            },
            wrapperCol: {
                xs: 24,
                sm: 16
            }
        };

        let formList = [
            (editType == 'create') ? {} : {
                type: 'INPUT',
                label: '用户Id',
                field: 'userId',
                initialValue: this.state.editData.userId,
                props: {
                    readOnly: true,
                    disabled: true,
                },
            },
            {
                type: 'INPUT',
                label: '用户名',
                field: 'userName',
                placeholder: '请输入用户名',
                initialValue: this.state.editData.userName,
                rules: [
                    {
                        required: true,
                        message: '请输入用户名',
                    },
                ],
            },
            {
                type: 'INPUT',
                label: '手机号',
                field: 'phone',
                placeholder: '请输入手机号',
                initialValue: this.state.editData.phone,
                rules: [
                    {
                        required: true,
                        message: '请输入手机号',
                    },
                    {
                        pattern: /^1\d{10}$/,
                        message: '请输入正确的手机号!',
                    },
                ],
            },
            {
                type: 'SELECT',
                label: '权限',
                field: 'utype',
                initialValue: this.state.editData.utype || '1',
                list: [{id: '1', name: '维保工人'}, {id: '2', name: '机构管理员'}, {id: '4', name: '财务'}],
                props: {
                    allowClear: false
                }
            },
            {
                type: 'SELECT',
                label: '状态',
                field: 'isenabled',
                initialValue: this.state.editData.isenabled || 1,
                list: [{id: 0, name: '失效'}, {id: 1, name: '有效 '}],
                props: {
                    allowClear: false
                }
            },
            {
                type: 'TEXT',
                label: '备注',
                field: 'remark',
                initialValue: this.state.editData.remark,
                props: {
                    autoSize: {
                        minRows: 4,
                        maxRows: 4
                    }
                }
            }
        ]

        return (
            <Spin spinning={loading}>
                <Modal
                    title={modalTitle}
                    visible={isShowEditModal}
                    width={550}
                    footer={false}
                    onCancel={() => {
                        this.setState({
                            isShowEditModal: false,
                            editData: {}
                        })
                    }}
                >
                    <FilterForm formList={formList} formLayout={formLayout} colLayout={colLayout}
                                handleType={editType} filterSubmit={this.handleFilter} submitName={'保存'}/>
                </Modal>
            </Spin>
        );
    }

}

export default Form.create()(EditAccount);
